<template>
  <div class="upd-office-staff-reim">
    <el-dialog v-el-drag-dialog="{ drag: true, full: false, resize: false }" title="修改办公室报账" :close-on-click-modal="false"
      :visible="true" @close="closeMd" width="24%" append-to-body>
      <el-form :model="sourceData" ref="formRef" :label-width="'100px'">
        <el-form-item prop="jbrUname" label="经办人" :rules="[{ required: true, message: '请选择经办人', trigger: 'blur' }]">
          <el-select style="width:100%" v-model="sourceData.jbrUname" clearable filterable placeholder="经办人">
            <el-option v-for="item in serviceManList" :key="item.baseUserId.uname" :label="item.baseUserId.realName"
              :value="item.baseUserId.uname">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="收款人" prop="cusUname" :rules="[{ required: false, message: '请选择收款人', trigger: 'blur' }]">
          <el-select style="width:100%" v-model="sourceData.cusUname" clearable filterable remote reserve-keyword
            :remote-method="remoteMethod" :loading="filter_loading" placeholder="收款人">
            <el-option v-for="item in cusUnameOptions" :key="item.baseUserId && item.baseUserId.uname"
              :label="item.baseUserId && item.baseUserId.realName" :value="item.baseUserId && item.baseUserId.uname">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="收入金额" prop="gathMoney" :rules="[
          { required: true, message: '请输入收入金额', trigger: 'blur' },
          { validator: validators, trigger: 'blur' }
        ]">
          <el-input v-model="sourceData.gathMoney" :disabled="sourceData.payMoney > 0 ? true : false" />
        </el-form-item>

        <el-form-item label="支出金额" prop="payMoney" :rules="[
          { required: true, message: '请输入支出金额', trigger: 'blur' },
          { validator: validators, trigger: 'blur' }
        ]">
          <el-input v-model="sourceData.payMoney" :disabled="sourceData.gathMoney > 0 ? true : false" />
        </el-form-item>

        <el-form-item label="车牌号" prop="plateNum">
          <el-select style="width:100%" v-model="sourceData.plateNum" clearable filterable placeholder="车牌号">
            <el-option v-for="item in carNumList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="记账类型">
          <el-select style="width:100%" v-model="sourceData.reimTypeId" clearable filterable placeholder="记账类型">
            <el-option v-for="item in reimTypeOptions" :key="item.id" :label="item.typeName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="图片">
          <UploadImg :src="fileBaseUrl + sourceData.voucherUrl" imgName="voucherUrl" @getImgUrl="setImgUrl"
            :url="'/company/upload'" :ps="{ userName: uname }" />
        </el-form-item>

        <el-form-item label="摘要">
          <el-input v-model="sourceData.remark">
          </el-input>
        </el-form-item>

        <div class="fm-btn-row">
          <el-button :loading="loading" style="margin-left: 20px" type="primary" icon="el-icon-success"
            @click="handleAccount">
            确 定
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import elDragDialog from "@/directive/el-drag-dialog";
import { modifyStaffReimburse } from "@/api/services/order.service";
import { getAllPlateNum } from "@/api/services/logistics.service";
import UploadImg from '@/components/UploadImg';
import { getReimTypeDict, getStaffCombo, getCompanyCusList } from "@/api/services/common.service";
import FV from "@/utils/FV";


export default {
  name: "UpdOfficeStaffReim",
  directives: { elDragDialog },
  props: { myData: Object },
  components: { UploadImg },
  computed: {
    ...mapGetters(["uname"]),
  },
  data() {
    const validators = (rule, value, callback) => {
      if (value) {
        if (!FV.isInt(value)) {
          return callback(new Error('请输入正整数'));
        }
        if (value <= 0) {
          return callback(new Error('金额不能小于0'));
        }
      }
      callback();
    }
    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,
      validators,
      filter_loading: false,
      loading: false,
      md: { state: this.state },
      sourceData: {
        updId: '',
        reimTypeId: '', //报账类型id
        jbrUname: '', // 经办人uname
        cusUname: '', // 往来客户uname
        plateNum: '',  // 车牌号
        gathMoney: '',  // 收入金额
        payMoney: '',  // 支出金额
        remark: '',  // 摘要
        voucherUrl: '',  // 图片url
      },
      bankOptions: [],
      reimTypeOptions: [], // 报账类型
      carNumList: [], // 车牌号
      serviceManList: [], // 经办人
      cusUnameOptions: [], // 收款人
    };
  },
  async created() {
    await this.init();

    if (this.myData.obj) {
      const { id, reimTypeId, operUser, reimUser, plateNum, gathMoney, payMoney, remark, reimVoucherUrl } = this.myData.obj;
      this.sourceData = {
        updId: id,
        reimTypeId: reimTypeId && reimTypeId.id, // 报账类型id
        jbrUname: operUser && operUser.uname, // 经办人uname
        cusUname: reimUser && reimUser.uname, // 往来客户uname
        plateNum,  // 车牌号
        gathMoney: gathMoney,  // 收入金额
        payMoney: payMoney,  // 支出金额
        remark,  // 摘要
        voucherUrl: reimVoucherUrl,  // 图片url
      }
      if (reimUser && reimUser.realName) this.remoteMethod(reimUser.realName)
    }
  },
  methods: {
    closeMd() {
      this.$emit("myClick", { state: false });
    },
    init() {
      // 报账类型
      getReimTypeDict({ addWay: 0, type: 1 }).then(res => {
        this.reimTypeOptions = res.data
      })
      // 车牌号
      getAllPlateNum({ status: 0 }).then(res => {
        this.carNumList = Object.keys(res.plateNums).map((item) => ({
          label: item,
          value: item,
        }));
      })
      // 员工下拉(经办人)
      getStaffCombo({ staffState: "NORMAL,TRY" }).then((res) => {
        this.serviceManList = res.data || [];
      });
    },

    remoteMethod(query) {
      if (!query) {
        this.filter_loading = false
        this.cusUnameOptions = []
        return
      }
      this.filter_loading = true
      // 客户下拉(收款人)
      getCompanyCusList({ find: query }).then(res => {
        this.filter_loading = false
        console.log(res.data)
        this.cusUnameOptions = res.data
      }).catch(() => {
        this.filter_loading = false
      })
    },

    setImgUrl(data) {
      this.sourceData.voucherUrl = data.url;
    },

    async handleAccount() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.loading = true
          let loading = this.U.qloading("提交中，请稍后...");
          modifyStaffReimburse(this.sourceData).then(res => {
            this.U.qclose(loading);
            this.loading = false
            if (res.code !== 1) {
              return this.U.qerror(res.msg);
            }
            this.closeMd();
            this.$emit("reloadDg");
          }).catch(() => {
            this.loading = false
            this.U.qclose(loading);
          })
        }
      })

    }
  },
};
</script>
